!(function() {
    // 点击文章，跳转至文章详情页面
    let allArticle = document.querySelectorAll(".each-article");

    for (let i = 0; i < allArticle.length; i++) {
        allArticle[i].addEventListener("click", (e) => {
            location.href = "../html/article.html";
        })
    }

    //获取谣言的元素
    // let yaoyanEle = document.querySelector(".yaoyan");
    // yaoyanEle.addEventListener("click", (e) => {
    //     location.href = "../html/yaoyan.html"
    // })

    //发送请求，获取疫情热点的数据并渲染到页面
    fetch("data/getTimelineService1.json").then((data) => {
        return data.json()
    }).then((data) => {
        console.log(data)
        console.log("redian")
            //获取新增确诊的元素
        let htmlStrArr = []
        htmlStrArr[0] = `        <div class="redian-title">
    <img src="https://img1.dxycdn.com/2021/0111/820/9732351014585228543-22.png" alt="">
</div>`
        data.forEach((item) => {
                let str = `<div class="zuixin">
        <div class="zuixin-btn">最新</div>
        <div>${item.title}</div>
    </div>`
                htmlStrArr.push(str)
            })
            //获取疫情热点的box
        let redianBox = document.querySelector(".redian");
        let html = htmlStrArr.join("");
        redianBox.innerHTML = html;
    }).catch(() => {
        let redianBox = document.querySelector(".redian");
        console.log("jinlaile ")
        redianBox.innerHTML = "疫情热点数据获取失败！";
    })

    // 近期疫情分布的截止时间
    let jiezhiBox = document.querySelector(".jiezhi");
    //获取今日日期
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    jiezhiBox.innerHTML = `截止日期:${y}年${m}月${d}日`;



    // 国内疫情地图部分的tab切换
    // 获取按钮的Box
    let mapBtnBox = document.querySelector(".maps-btn");
    //获取地图的Box
    let mapViewBox = document.querySelector(".data-view-map");
    mapBtnBox.addEventListener("click", (e) => {
        //得到当前点击的tab的对应的索引
        let clickIndex = parseInt(e.target.dataset.index);
        //处理按钮部分的
        for (let i = 0; i < mapBtnBox.children.length; i++) {
            mapBtnBox.children[i].classList.remove("active");
            // 先让所有的地图隐藏
            mapViewBox.children[i].classList.remove("active");

        }
        // 再让当前点击的按钮加上active类
        e.target.classList.add("active");
        //让当前点击的按钮对应的tab地图显示
        mapViewBox.children[clickIndex].classList.add("active");
    })


    //国内疫情趋势的左右按钮
    // 获取国内疫情趋势的左按钮
    let guoneiLeftBtn = document.querySelector("#guonei-left");
    let guoneiRightBtn = document.querySelector("#guonei-right");
    //获取国内疫情趋势的盒子
    let guoneiQuShiBox = document.querySelector("#guonei-qushi-box");
    let step = 0;
    guoneiLeftBtn.addEventListener("click", (e) => {
        step += 1;
        if (step >= 7) {
            step = 7
        }
        guoneiQuShiBox.style.transform = `translateX(-${step}rem)`;
    })
    guoneiRightBtn.addEventListener("click", (e) => {
        step -= 1;
        if (step <= 0) {
            step = 0;
        }
        guoneiQuShiBox.style.transform = `translateX(-${step}rem)`;
    })



    //国外疫情趋势的左右按钮
    // 获取国外疫情趋势的左按钮
    let guowaiLeftBtn = document.querySelector("#guowai-left");
    let guowaiRightBtn = document.querySelector("#guowai-right");
    //获取国内疫情趋势的盒子
    let guowaiQuShiBox = document.querySelector("#guowai-qushi-box");
    guowaiLeftBtn.addEventListener("click", (e) => {
        step += 2;
        guowaiQuShiBox.style.transform = `translateX(-${step}rem)`;
        if (step >= 7) {
            step = 7
        }
    })
    guowaiRightBtn.addEventListener("click", (e) => {
        step -= 2;
        guowaiQuShiBox.style.transform = `translateX(-${step}rem)`;
        if (step <= 0) {
            step = 0;
        }
    })




    //新冠疫苗部分
    // 定义一个函数，用来返回文章id
    function getArticleId(linkStr) {
        let reg = /id=(.*)/;
        if (!linkStr.match(reg)[1]) {
            // 如果没有匹配到文章id，返回-1
            return -1;
        } else {
            return linkStr.match(reg)[1];
        }
    }
    //获取新冠疫苗的box
    let allArticleBox = document.querySelector("#all-article");
    fetch("data/getWikiList.json").then((data) => {
        return data.json()
    }).then((data) => {
        console.log(data)
            //获取新增确诊的元素
        let htmlStrArr = []
        htmlStrArr[0] = `<div class="big-title">新冠疫苗</div>`;

        data.forEach((item) => {
            let str = `<div class="each-article" data-articleId=${getArticleId(item.linkUrl)}>
        <img src="${item.imgUrl}"  style="display: ${item.imgUrl?"block":"none"};"  data-articleId=${getArticleId(item.linkUrl)}>
        <div class="introduction"  data-articleId=${getArticleId(item.linkUrl)}>
            <div class="article-title"  data-articleId=${getArticleId(item.linkUrl)}>
            ${item.title}</div>
            <div class="article-introduction"  data-articleId=${getArticleId(item.linkUrl)}>${item.description}</div>
        </div>
        <!-- 查看详情 -->
        <div class="detail"  data-articleId=${getArticleId(item.linkUrl)}>查看详情</div>
    </div>`;
            htmlStrArr.push(str);
        })
        let html = htmlStrArr.join("");
        allArticleBox.innerHTML = html;
    }).catch(() => {
        allArticleBox.innerHTML = "新冠疫苗数据获取失败！";
    })


    //点击每篇文章，跳转至对应的文章详情页面
    allArticleBox.addEventListener("click", (e) => {
        if (e.target.dataset.articleid) {
            // location.href = `https://m.dxy.com/article/${e.target.dataset.articleid}?noNcov=true`
            location.href = `../html/${e.target.dataset.articleid}.html`;
        }
    })


})()